<template>
  <div class="home">
    <yg-background
      :imgStyle="{
        width: '100%',
        height: '368px',
        objectFit: 'cover'
      }"
      :imgSrc="require('@/assets/images/img_bg01.png')"
    >
      <template #default>
        <div class="yg_background_box">
          <div class="title">{{ userInfo?.name }}</div>
          <div class="content">{{ userInfo?.motto }}</div>
        </div>
      </template>
    </yg-background>
    <main class="main_box container">
      <!-- 左侧边栏 -->
      <aside class="aside_left hidden-xs">
        <yg-usercard />
        <yg-recommend class="visible-sm" style="margin-top: 12px" />
        <yg-tags class="visible-sm" style="margin-top: 12px" />
      </aside>
      <!-- 内容 -->
      <section class="main_content">
        <div
          :class="index === 0 ? 'item' : 'item margin_top'"
          v-for="(item, index) in articleList"
          :key="item?.id"
          @click="$router.push(`/article/${item?.id}`)"
        >
          <img :src="item?.cover" alt="" />
          <div class="content">
            <h3>{{ item?.title }}</h3>
            <div class="tags" @click.stop="">
              <router-link
                class="tags_item"
                :style="{ backgroundColor: tag?.backgroundColor }"
                v-for="tag in item?.tagsList"
                :key="tag?.id"
                :to="`/tag/${tag?.id}`"
              >
                {{ tag?.title }}
              </router-link>
            </div>
            <div class="info">
              <span>浏览量：111</span>
              <span>评论：10</span>
              <span>{{ $moment().fromNow() }}</span>
            </div>
          </div>
          <div class="sort_tags" :style="{ backgroundColor: item?.category_info?.backgroundColor }">
            {{ item?.category_info?.title }}
          </div>
        </div>
        <!-- mobile分页 -->
        <div class="visible-xs">
          <div class="yg_pagination">
            <el-pagination
              small
              :current-page="1"
              :page-size="10"
              :total="100"
              :pager-count="5"
              layout="prev, pager, next"
              background
            >
            </el-pagination>
          </div>
        </div>
        <!-- pc分业 -->
        <div class="hidden-xs">
          <div class="yg_pagination">
            <el-pagination
              :current-page="1"
              :page-size="10"
              :total="100"
              :pager-count="5"
              layout="prev, pager, next, jumper"
              background
            >
            </el-pagination>
          </div>
        </div>
      </section>
      <!-- 右侧边栏 -->
      <aside class="aside_right hidden-xs hidden-sm">
        <yg-recommend />
        <yg-tags style="margin-top: 12px" />
      </aside>
    </main>
    <yg-footer />
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { getCsApi } from '@/api/api.js'
export default {
  name: 'Home',
  components: {},
  async created() {
    const res = await getCsApi()
    console.log(res);
  },
  data() {
    return {
      articleList: [
        {
          id: 1,
          title: '文章标题1文章标题1文章标题1文章标题1文章标题1文章标题1文章标题1文章标题1',
          cover: require('@/assets/images/img_cover01.png'),
          category_id: 1,
          category_info: { id: 1, title: '学习笔记', backgroundColor: 'gold' },
          tagsList: [
            { id: 1, title: 'Vue', backgroundColor: 'brown' },
            { id: 2, title: 'React', backgroundColor: 'orange' },
            { id: 3, title: 'Axios', backgroundColor: 'blue' },
            { id: 4, title: '正则', backgroundColor: 'purple' }
          ],
          created_at: '2021-12-23T10:45:21+08:00',
          updated_at: '2021-12-24T11:33:44+08:00',
          release_at: '2021-12-24T11:33:44+08:00',
          commentList: [{}, {}, {}, {}],
          browseCount: 232,
          content: `
          <h1 style="text-align: justify;">H1标题1</h1>
          <p style="text-indent: 2em; text-align: justify;">段落1</p>
          <p style="text-indent: 2em; text-align: justify;">段落2</p>
          <p style="text-indent: 2em; text-align: justify;">
            <span style="text-align: justify; text-indent: 2em;">
              近几年，中国联通积极布局5G网络、数据中心等新基建，不断提升基础设施服务水平，努力打造数字经济创新发展新高地。5G与数据中心是工业互联网、人工智能发展的基础，所以对于电信运营商来说，他们在新基建中的责任可谓是十分重大的。
            </span>
          </p>
          <p style="text-indent: 2em; text-align: justify;">
            <span style="text-align: justify; text-indent: 2em;">
              中国移动也正在构建以5G、算力网络、智慧中台建设为重点的“连接+算力+能力”新基建，积极推动实现网络无所不达、算力无处不在。中国移动不仅要打造品质一流的5G精品网络还要精准建设全光千兆宽带网络，落实“东数西算“战略等。
            </span>
          </p>
          <h2 style="text-align: justify;">H2标题1</h2>
          <p style="text-indent: 2em; text-align: justify;">
            <span style="text-align: justify; text-indent: 2em;">
              受新冠肺炎疫情冲击与国际局部逆全球化趋势的影响，数字经济发展在未来经济发展中绝对是重要增长的部分。我们一定要搞好新基建，不断推进产业数字化进程，加速数字经济发展。
            </span>
          </p><p style="text-indent: 2em; text-align: justify;">段落1</p>
          <p style="text-indent: 2em; text-align: justify;">段落2</p>
          <h2 style="text-align: justify;">H2标题2</h2>
          <p style="text-indent: 2em; text-align: justify;">
            <span style="text-align: justify; text-indent: 2em;">
              近几年，中国联通积极布局5G网络、数据中心等新基建，不断提升基础设施服务水平，努力打造数字经济创新发展新高地。5G与数据中心是工业互联网、人工智能发展的基础，所以对于电信运营商来说，他们在新基建中的责任可谓是十分重大的。
            </span>
          </p>
          <h2 style="text-align: justify;">H2标题3</h2>
          <p style="text-indent: 2em; text-align: justify;">
            <span style="text-align: justify; text-indent: 2em;">
              中国移动也正在构建以5G、算力网络、智慧中台建设为重点的“连接+算力+能力”新基建，积极推动实现网络无所不达、算力无处不在。中国移动不仅要打造品质一流的5G精品网络还要精准建设全光千兆宽带网络，落实“东数西算“战略等。
            </span>
          </p>
          <h1 style="text-align: justify;">标题</h1>
          <h2 style="text-align: justify;">H2标题1</h2>
          <p style="text-indent: 2em; text-align: justify;">
            <span style="text-align: justify; text-indent: 2em;">
              受新冠肺炎疫情冲击与国际局部逆全球化趋势的影响，数字经济发展在未来经济发展中绝对是重要增长的部分。我们一定要搞好新基建，不断推进产业数字化进程，加速数字经济发展。
            </span>
          </p>`
        },
        {
          id: 2,
          title: '协助数字新基建，协助数字经济',
          cover: require('@/assets/images/img_cover02.png'),
          category_id: 2,
          category_info: {
            id: 2,
            title: '个人项目',
            backgroundColor: 'purple'
          },
          tagsList: [
            { id: 5, title: '拖拽', backgroundColor: 'blue' },
            { id: 6, title: '测', backgroundColor: 'red' },
            { id: 7, title: '试', backgroundColor: 'black' }
          ],
          created_at: '2021-12-26T10:45:21+08:00',
          updated_at: '2022-12-26T11:33:44+08:00',
          release_at: '2022-12-26T11:33:44+08:00',
          commentList: [{}, {}, {}, {}],
          browseCount: 322,
          content: `<h1 style="text-align: justify;">H1标题</h1><h2 style="text-align: justify;">H2标题</h2><p style="text-indent: 2em; text-align: justify;">我们知道长三角地区是我国经济发展最活跃的地区之一。2022年上半年的数据显示，数字经济在整个地区的经济里占非常重要的地位。要发展数字经济必然离不开新型信息基础设施的助力。</p><p style="text-indent: 2em; text-align: justify;">首先，新型基础设施建设主要包括两方面，一是包括5G、特高压、人工智能、工业互联网等在内的通信网络基础设施；二是新技术，比如城际高速铁路和城际轨道交通、大数据中心、新能源汽车充电桩等新型智慧基建。</p><p style="text-align: center;"></p><p style="text-indent: 2em; text-align: justify;"><span style="text-align: justify; text-indent: 2em;">近几年，中国联通积极布局5G网络、数据中心等新基建，不断提升基础设施服务水平，努力打造数字经济创新发展新高地。5G与数据中心是工业互联网、人工智能发展的基础，所以对于电信运营商来说，他们在新基建中的责任可谓是十分重大的。</span></p><h1 style="text-align: justify;">H1标题</h1><h2 style="text-align: justify;">H2标题</h2><p style="text-indent: 2em; text-align: justify;"><span style="text-align: justify; text-indent: 2em;">中国移动也正在构建以5G、算力网络、智慧中台建设为重点的“连接+算力+能力”新基建，积极推动实现网络无所不达、算力无处不在。中国移动不仅要打造品质一流的5G精品网络还要精准建设全光千兆宽带网络，落实“东数西算“战略等。</span></p><h1 style="text-align: justify;">H1标题</h1><h2 style="text-align: justify;">H2标题</h2><p style="text-indent: 2em; text-align: justify;"><span style="text-align: justify; text-indent: 2em;">受新冠肺炎疫情冲击与国际局部逆全球化趋势的影响，数字经济发展在未来经济发展中绝对是重要增长的部分。我们一定要搞好新基建，不断推进产业数字化进程，加速数字经济发展。</span></p>`
        },
        {
          id: 3,
          title: '文章标题3',
          cover: require('@/assets/images/img_cover03.png'),
          category_id: 2,
          category_info: {
            id: 2,
            title: '个人项目',
            backgroundColor: 'purple'
          },
          tagsList: [{ id: 8, title: 'antd', backgroundColor: 'violet' }],
          created_at: '2022-02-07T10:45:21+08:00',
          updated_at: '2022-02-07T11:33:44+08:00',
          release_at: '2022-02-07T11:33:44+08:00',
          commentList: [{}, {}, {}, {}],
          browseCount: 236,
          content: `<h1 style="text-align: justify;">H1标题</h1><h2 style="text-align: justify;">H2标题</h2><p style="text-indent: 2em; text-align: justify;">我们知道长三角地区是我国经济发展最活跃的地区之一。2022年上半年的数据显示，数字经济在整个地区的经济里占非常重要的地位。要发展数字经济必然离不开新型信息基础设施的助力。</p><p style="text-indent: 2em; text-align: justify;">首先，新型基础设施建设主要包括两方面，一是包括5G、特高压、人工智能、工业互联网等在内的通信网络基础设施；二是新技术，比如城际高速铁路和城际轨道交通、大数据中心、新能源汽车充电桩等新型智慧基建。</p><h1 style="text-align: justify;">H1标题</h1><h2 style="text-align: justify;">H2标题</h2><p style="text-align: center;"></p><p style="text-indent: 2em; text-align: justify;"><span style="text-align: justify; text-indent: 2em;">近几年，中国联通积极布局5G网络、数据中心等新基建，不断提升基础设施服务水平，努力打造数字经济创新发展新高地。5G与数据中心是工业互联网、人工智能发展的基础，所以对于电信运营商来说，他们在新基建中的责任可谓是十分重大的。</span></p><p style="text-indent: 2em; text-align: justify;"><span style="text-align: justify; text-indent: 2em;">中国移动也正在构建以5G、算力网络、智慧中台建设为重点的“连接+算力+能力”新基建，积极推动实现网络无所不达、算力无处不在。中国移动不仅要打造品质一流的5G精品网络还要精准建设全光千兆宽带网络，落实“东数西算“战略等。</span></p><h1 style="text-align: justify;">H1标题</h1><h2 style="text-align: justify;">H2标题</h2><p style="text-indent: 2em; text-align: justify;"><span style="text-align: justify; text-indent: 2em;">受新冠肺炎疫情冲击与国际局部逆全球化趋势的影响，数字经济发展在未来经济发展中绝对是重要增长的部分。我们一定要搞好新基建，不断推进产业数字化进程，加速数字经济发展。</span></p>`
        },
        {
          id: 4,
          title: '文章标题4',
          cover: require('@/assets/images/img_cover04.png'),
          category_id: 1,
          category_info: { id: 1, title: '学习笔记', backgroundColor: 'gold' },
          tagsList: [
            { id: 9, title: '正则', backgroundColor: 'green' },
            { id: 10, title: '表达式', backgroundColor: 'teal' }
          ],
          created_at: '2022-05-07T10:45:21+08:00',
          updated_at: '2022-05-08T11:33:44+08:00',
          release_at: '2022-05-08T11:33:44+08:00',
          commentList: [{}, {}, {}, {}],
          browseCount: 236,
          content: `<h1 style="text-align: justify;">H1标题</h1><h2 style="text-align: justify;">H2标题</h2><p style="text-indent: 2em; text-align: justify;">我们知道长三角地区是我国经济发展最活跃的地区之一。2022年上半年的数据显示，数字经济在整个地区的经济里占非常重要的地位。要发展数字经济必然离不开新型信息基础设施的助力。</p><p style="text-indent: 2em; text-align: justify;">首先，新型基础设施建设主要包括两方面，一是包括5G、特高压、人工智能、工业互联网等在内的通信网络基础设施；二是新技术，比如城际高速铁路和城际轨道交通、大数据中心、新能源汽车充电桩等新型智慧基建。</p><p style="text-align: center;"></p><p style="text-indent: 2em; text-align: justify;"><span style="text-align: justify; text-indent: 2em;">近几年，中国联通积极布局5G网络、数据中心等新基建，不断提升基础设施服务水平，努力打造数字经济创新发展新高地。5G与数据中心是工业互联网、人工智能发展的基础，所以对于电信运营商来说，他们在新基建中的责任可谓是十分重大的。</span></p><p style="text-indent: 2em; text-align: justify;"><span style="text-align: justify; text-indent: 2em;">中国移动也正在构建以5G、算力网络、智慧中台建设为重点的“连接+算力+能力”新基建，积极推动实现网络无所不达、算力无处不在。中国移动不仅要打造品质一流的5G精品网络还要精准建设全光千兆宽带网络，落实“东数西算“战略等。</span></p><h1 style="text-align: justify;">H1标题</h1><h2 style="text-align: justify;">H2标题</h2><p style="text-indent: 2em; text-align: justify;"><span style="text-align: justify; text-indent: 2em;">受新冠肺炎疫情冲击与国际局部逆全球化趋势的影响，数字经济发展在未来经济发展中绝对是重要增长的部分。我们一定要搞好新基建，不断推进产业数字化进程，加速数字经济发展。</span></p>`
        },
        {
          id: 5,
          title: '文章标题5',
          cover: require('@/assets/images/img_cover05.png'),
          category_id: 3,
          category_info: { id: 3, title: '随心记', backgroundColor: 'pink' },
          tagsList: [{ id: 1, title: 'Vue', backgroundColor: 'brown' }],
          created_at: '2022-12-07T10:45:21+08:00',
          updated_at: '2022-12-08T11:33:44+08:00',
          release_at: '2022-12-08T11:33:44+08:00',
          commentList: [{}, {}, {}, {}],
          browseCount: 236,
          content: `<h1 style="text-align: justify;">H1标题</h1><h2 style="text-align: justify;">H2标题</h2><p style="text-indent: 2em; text-align: justify;">我们知道长三角地区是我国经济发展最活跃的地区之一。2022年上半年的数据显示，数字经济在整个地区的经济里占非常重要的地位。要发展数字经济必然离不开新型信息基础设施的助力。</p><h1 style="text-align: justify;">H1标题</h1><h2 style="text-align: justify;">H2标题</h2><p style="text-indent: 2em; text-align: justify;">首先，新型基础设施建设主要包括两方面，一是包括5G、特高压、人工智能、工业互联网等在内的通信网络基础设施；二是新技术，比如城际高速铁路和城际轨道交通、大数据中心、新能源汽车充电桩等新型智慧基建。</p><p style="text-align: center;"></p><h1 style="text-align: justify;">H1标题</h1><h2 style="text-align: justify;">H2标题</h2><p style="text-indent: 2em; text-align: justify;"><span style="text-align: justify; text-indent: 2em;">近几年，中国联通积极布局5G网络、数据中心等新基建，不断提升基础设施服务水平，努力打造数字经济创新发展新高地。5G与数据中心是工业互联网、人工智能发展的基础，所以对于电信运营商来说，他们在新基建中的责任可谓是十分重大的。</span></p><p style="text-indent: 2em; text-align: justify;"><span style="text-align: justify; text-indent: 2em;">中国移动也正在构建以5G、算力网络、智慧中台建设为重点的“连接+算力+能力”新基建，积极推动实现网络无所不达、算力无处不在。中国移动不仅要打造品质一流的5G精品网络还要精准建设全光千兆宽带网络，落实“东数西算“战略等。</span></p><h1 style="text-align: justify;">H1标题</h1><h2 style="text-align: justify;">H2标题</h2><p style="text-indent: 2em; text-align: justify;"><span style="text-align: justify; text-indent: 2em;">受新冠肺炎疫情冲击与国际局部逆全球化趋势的影响，数字经济发展在未来经济发展中绝对是重要增长的部分。我们一定要搞好新基建，不断推进产业数字化进程，加速数字经济发展。</span></p>`
        }
      ]
    }
  },
  computed: {
    ...mapState('User', ['userInfo'])
  }
}
</script>

<style lang="scss" scoped>
.home {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f9f9f9;
  & > .main_box {
    flex: 1;
    display: flex;
    flex-direction: row;
    padding: 16px 0;
    min-width: 320px;
    & > .aside_left,
    & > .aside_right {
      display: flex;
      flex-direction: column;
      min-width: 220px;
      max-width: 220px;
    }
    & > .main_content {
      display: flex;
      flex-direction: column;
      margin: 0 12px;
      width: 100%;
      border-radius: 4px;
      & > .item {
        position: relative;
        display: flex;
        flex-direction: column;
        background-color: #fff;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        border-radius: 4px;
        transition: all 300ms;
        overflow: hidden;
        cursor: pointer;
        &:hover {
          transform: translateY(-2px);
          box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.48);
        }
        &.margin_top {
          margin-top: 12px;
        }
        & > img {
          min-height: 200px;
          width: 100%;
          height: 200px;
          object-fit: cover;
        }
        & > .content {
          display: flex;
          flex-direction: column;
          padding: 12px;
          & > h3 {
            margin: 0;
            font-size: 16px;
            font-weight: 400;
            color: #171717;
            line-height: 24px;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            text-overflow: ellipsis;
            overflow: hidden;
            word-break: break-all;
          }
          & > .tags {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            margin-top: 12px;
            & > .tags_item {
              margin: 3px;
              padding: 4px 12px;
              background-color: #ff7777;
              border-radius: 4px;
              font-size: 12px;
              font-weight: 400;
              color: #fff;
              line-height: 12px;
              user-select: none;
            }
          }
          & > .info {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            margin-top: 12px;
            & > span {
              font-size: 12px;
              font-weight: 400;
              color: #999;
              line-height: 20px;
            }
          }
        }
        & > .sort_tags {
          position: absolute;
          top: 0;
          left: 0;
          padding: 6px 12px;
          background-color: rgb(220, 218, 53);
          border-radius: 0 0 4px 0;
          font-size: 14px;
          font-weight: 400;
          color: #fff;
          line-height: 14px;
        }
      }
      .yg_pagination {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        height: 100px;
      }
    }
  }
}
@media (max-width: 768px) {
  .main_box {
    margin: 0;
    width: 100vw !important;
    & > .main_content {
      margin: 0 16px !important;
    }
  }
}
</style>
